<template>
	<view class="pad20 container">
		<sb-back-icon />
		<u-form :model="form" :label-width="140" class="pad40" ref="uForm">
			<u-form-item label="Original " prop="password">
				<u-input type="password" v-model="form.password" placeholder="Original Password" />
			</u-form-item>
			<u-form-item label="New " prop="newPassword">
				<u-input type="password" v-model="form.newPassword" placeholder="New Password" />
			</u-form-item>
			<u-form-item label="Confirm" prop="confirmPassword">
				<u-input type="password" v-model="form.confirmPassword" placeholder="Confirm Password" />
			</u-form-item>
		</u-form>
		<sb-center>
			<view class="flex j-c c-m a-c padv50 btn-danger" @click="submit">
				Confirm Update
			</view>
		</sb-center>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				form: {
					id: "",
					password: "",
					newPassword: "",
					confirmPassword: "",
				},
				rules: {
					password: [{
						required: true,
						message: "请输入原始密码",
						trigger: "blur",
					}, ],
					newPassword: [{
						required: true,
						message: "请输入新密码",
						trigger: "blur",
					}, ],
					confirmPassword: [{
							required: true,
							message: "请再次输入新密码",
							trigger: "blur",
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.newPassword;
							},
							message: "两次输入的密码不相等",
							trigger: "blur",
						},
					],
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			if (!this.$checkLogin()) return this.$redirect2Login();
		},
		methods: {
			submit() {
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						const params = { ...this.form };
						for (let i in params) {
							if (i !== "id") {
								params[i] = md5Libs.md5(params[i]);
							}
						}

						this.$postB("/user/updatePassword", params)
							.then((res) => {
								if (res.success) {
									this.$msg("密码修改成功,请重新登录");
								} else {
									this.$msg("原密码输入不正确，请重新输入");
								}
							})
							// if(success)
							.catch((e) => {
								this.$msg("密码修改失败");
							});
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-form-item--left__content__label {
				font-weight: bold;
			}
		}
	}

	.btn-danger {
		background-color: #CC0033;
		color: #fff;
		width: 400rpx;
		height: 70rpx;
		border-radius: 35rpx;
	}
</style>
